<template>
  <el-page-header
    :icon="ArrowLeft"
    title="返回"
    class="page-header"
    @back="handleGo"
  >
    <template #content>
      <span class="text-large font-600 mr-3"> 订单记录 </span>
    </template>
  </el-page-header>

  <el-table
    class="el-tab"
    :data="tableData.list"
    style="width: 98%"
    :border="true"
  >
    <el-table-column prop="id" label="序号" width="175" align="center" />
    <el-table-column prop="name" label="订餐人" width="350" align="center" />
    <el-table-column prop="phone" label="联系电话" width="476" align="center" />
    <el-table-column prop="details" label="操作" width="340" align="center">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="detailsRow(scope.row)"
          >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="20"
    :pager-count="5"
  />
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted, ref } from "vue";
import "../../../mock/orderMock";
import { useRouter } from "vue-router";
let router = useRouter();
let handleGo = () => {
  router.go(-1);
};
let tableData = ref([]);
// 请求历史记录
onMounted(() => {
  axios.get("/api/record/list").then((res) => {
    
    tableData.value.list = res.data.list;
  });
});

// 详情
let detailsRow = (row) => {
  router.push('/index/recordDetails/'+row.id);
};
</script>

<style lang="scss" scoped>
.page-header {
  background: rgb(242, 242, 242);
  height: 85px;
  margin-top: -20px;
  padding-left: 20px;
  .text-large {
    line-height: 85px;
  }
}
</style>